<template>
	<view>
		<view class="geren">
			<view class="geren_t" @click="choiceImg(0)">
				<image :src="member.avatar?member.avatar:'../../static/index/tx.png'" class="w138" mode=""></image>
			</view>
			<view class="geren_b">

				<view class="geren_box">
					<view class="box-item flex1" @click="nicheng()">
						昵称
						<view class="box-r flex1">
							<input style="text-align: right;color: #999999;" v-model="member.nickname" type="text"
								placeholder="请填写">
							<u-icon name="arrow-right" color="#b7b7b7"></u-icon>
						</view>
					</view>
				</view>
				<view class="geren_box">
					<view class="box-item flex1" @click="topath()">
						用户协议
						<view class="box-r flex1">

							<u-icon name="arrow-right" color="#b7b7b7"></u-icon>
						</view>
					</view>
				</view>
			</view>
			<view class="nichengpop">
		  <l-popup :radius="20" :show="nichengshow" @mask="mask">
		        <view class="pop">
		        	<view class="pop_t" @click="quxiao">
		        		<image src="../../static/x.png" class="w48" mode=""></image>
		        	</view>
					<view class="xiugai">
						修改昵称
					</view>
					<view class="shuru">
						<u-input v-model="value" type="text" border="none" />
					</view>
					<view class="queding" @click="queding">
						确定
					</view>
		        </view>
		     </l-popup>
				

			</view>

		</view>
	</view>
</template>

<script>
	import {
			mapState,
			mapGetters,
			mapMutations
		} from 'vuex'
	export default {
		data() {
			return {
				nichengshow: false,
value:'',
				userinfo: {
					avatar: '../../static/index/tx.png',
					nickname: '天很蓝萨丁格天很蓝萨丁格'
				},
			}
		},
		computed: {
			...mapState(['member', 'service_status', 'token']),
			...mapGetters(['isLogin']),
		
		},
		async onLoad(options) {
		this.userinfo=this.member
		},
		methods: {
			...mapMutations(['SET_MEMBER', 'SET_OPENID','setTOKEN']),
			topath() {
				uni.navigateTo({
					url: "/pages/privacy/privacy"
				})

			},
			choiceImg(is) {
				/* if(this.zt==0){ return} */
				let _this = this
				uni.chooseImage({
					success: function(res) {
						console.log(JSON.stringify(res.tempFilePaths),"头像打印");
						uni.showLoading({title:'图片上传中'})
						let a = res.tempFilePaths //选择图片路径
						for(let i in a){
							_this.uploadImg(a[i],a.length,is)
							// _this.uploadImg(a[i],is)
						}
					}
				})
			},
			//上传图片
			uploadImg(e,num,is) {
				let _this = this
				let token = uni.getStorageSync('token')
				uni.uploadFile({
					url: 'https://play.bozhoukeji.cn/api/upload',
					filePath: e,
					name: 'file',
					header:{
						token:_this.token
					},
					success:async  (res) => {
						/* console.log(res,"请求接口打的印") */
						let _data = JSON.parse(res.data);
						console.log(_data,"打印的接口数据")
						if(_data.code==200){
							console.log(1,is,num)
							if(is){
								
								// 相册
								_this.list = _this.list.concat(_data.data.path)
								console.log(_this.list,"相册的值")
								_this.list2.push(_data.data.path)
								
								if(_this.list2.length == num){
									_this.list2 = []
									uni.hideLoading()
								}
							}else{
								// 头像
								_this.img = _data.data.path
								let data = await this.$u.api.set_nickname({
									// name:this.value,
									avatar: _data.data.path
								});
								this.SET_MEMBER(data.data);
								console.log(_this.img,"打印的this.img")
								uni.hideLoading()
							}
						}
					}
				});
			},
			nicheng() {
				console.log(this.nichengshow ,"hahahh");
				this.nichengshow = true
			},
			async queding(){
				let data = await this.$u.api.set_nickname({
					name:this.value,
					
				});
				this.SET_MEMBER(data.data);
				this.nichengshow = false
			}
			,
			quxiao(){
				this.nichengshow = false
			}
		}
	}
</script>

<style>
	.body {
		background-color: #f2f2f2;
	}
	.geren{
		padding: 30rpx;
	}
.w138{
	border-radius: 50%;
}
	.geren_t {
		background-color: #fff;
		text-align: center;
		margin-top: 70rpx;
		margin-bottom: 70rpx;
	}

	.geren_b {
		margin: 30rpx;
	}

	.box-item {
		width: 100%;
		height: 110rpx;
		background: #FFFFFF;
		border-bottom: 1rpx solid #f3f3f3;
		// padding: 0 30rpx;
		box-sizing: border-box;
		justify-content: space-between;
		// font-size: 30rpx;
	}

	.box-r {
		color: #999999;
	}
	.pop{
		width: 640rpx;
		height: 416rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		opacity: 1;
		padding: 30rpx;
		text-align: center;
	}
	.pop_t{
		width: 100%;
		text-align: right;
	}
	.xiugai{
		font-size: 34rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: bold;
		color: #353535;
		line-height: 40rpx;
		margin-bottom: 50rpx;
	
	}
	.shuru{
		margin: 20rpx;
		border-bottom: 2rpx solid #F3F3F3;
	}
	.queding{
		margin:60rpx auto;
		width: 470rpx;
		height: 84rpx;
		background: linear-gradient(90deg, #C74BF0 0%, #8438FC 100%);
		border-radius: 82rpx 82rpx 82rpx 82rpx;
		
		font-size: 32rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		line-height:84rpx;
	
	}
</style>